<template>
  <div>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px" size="small">
      <el-form-item label="名字" prop="name">
        <el-input v-model="form.name" placeholder="请输入昵称" :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="手机号" prop="phonenumber">
        <el-input v-model="form.phonenumber" placeholder="请输入手机号" :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item label="位置" prop="location">
        <el-cascader
          v-model="value"
          :options="options"
          :props="{ expandTrigger: 'hover' ,
      value: 'code',
      label: 'name',
      children: 'children',}"
          @change="handleChange"
          class="custom-cascader"></el-cascader>
      </el-form-item>
      <el-form-item label="具体位置" prop="address">
        <el-input v-model="form.address" placeholder="请输入具体地址" clearable :style="{width: '90%'}"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="search" class="el-buttonsouso">确定</el-button>
        <el-button @click="resetForm" size="medium" class="el-buttonsouso">取消</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>

import {getTreeList, getAddData} from "@/api/list/list";

export default {
  name: "Address",
  props: {
    userId: {
      type: Number,
      required: true // 必填项
    }
  },
  data() {
    return {
      form: {
        name: "",
        phonenumber: "",
        levelOne: "",
        levelTwo: "",
        levelThree: "",
        levelFour: "",
        address: null,
        userId: null
      },
      value: [],
      options: [],
      rules: {
        name: [
          { required: true, message: '请输入名字', trigger: 'blur' },
          { min: 2, max: 20, message: '长度在 2 到 20 个字符', trigger: 'blur' }
        ],
        phonenumber: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        value: [
          { type: 'array', required: true, message: '请选择位置', trigger: 'change' }
        ],
        address: [
          { required: true, message: '请输入具体地址', trigger: 'blur' },
          { min: 5, max: 50, message: '长度在 5 到 50 个字符', trigger: 'blur' }
        ]
      },
    }
  },
  mounted() {
    this.treeList();
  },
  methods: {
    search() {
      this.form.userId = this.userId
      if (!this.value || !this.value[0]) {
        this.$message({
          message: '请选择地址',
          type: 'warning',
          duration: 3000
        });
        return; // 阻止方法继续执行
      }
      this.form.levelOne = this.value[0]
      this.form.levelTwo = this.value[1]
      this.form.levelThree = this.value[2]
      this.form.levelFour = this.value[3]
      getAddData(this.form).then(response => {
        this.$message({
          message: response.msg,
          type: 'success',
          duration: 3000  // 3秒后自动关闭
        });
        // 触发自定义事件，并可传递参数
        this.$emit('handleDialogClose');
      })
        .catch(error => {
          // 处理错误
          console.error('请求失败:', error);
        });
    },
    resetForm() {
      this.$emit('handleDialogClose');
    },

    // 级联选择器
    handleChange(value) {
      console.log(value);
    },
    // 级联选择器数据接口
    treeList() {
      getTreeList().then(response => {
        // 处理响应数据
        this.options = response.data;
      })
        .catch(error => {
          // 处理错误
          console.error('请求失败:', error);
        });
    },

  },
}
</script>
<style scoped lang="scss">
.custom-cascader {
  width: 90%; /* 设置需要的宽度 */
}

.el-buttonsouso {
  padding: 0px 20px; /* 左右内边距调整为 16px（原 small 为 0 12px） */
  height: 30px; /* 高度调整为 36px（原 small 为 32px） */
  font-size: 14px; /* 字体大小（原 small 为 13px） */
}
</style>
